<template>
  <view v-if="shenheStatus == 0" class="page-container">
    <view class="page-head">
      <view class="swiper-section">
        <u-swiper height="750" :list="goods_info.goods_pic"></u-swiper>
      </view>
    </view>
    <view class="page-body">
      <view class="goods-info">
        <view class="name">{{ goods_info.name }}</view>
        <!-- <view class="sku">{{ goodInfo.desc }}</view> -->
        <view class="actions">
          <view>
            <view class="price-box">
              <view class="price">
                <text>￥</text>
                <text>{{ goods_info.price | priceBeforeZero }}</text>
                <text>{{ goods_info.price | priceAfterZero }}</text>
              </view>
              <!-- <view class="origin-price">打包费￥2.0/份</view> -->
            </view>
          </view>
          <view v-if="goods_info.use_attr == '0'" class="action-box">
            <!-- <view
              class="reduce"
              :class="goods_info.select_num < 1 ? 'disabled' : ''"
              @click="reduce"
            >
              <view></view>
            </view>
            <view class="num">{{ goods_info.select_num }}</view> -->
            <view class="add" @click="add">
              <i class="iconfont icon-add-select"></i>
            </view>
          </view>
          <view
            class="choose-sku"
            v-else
            @click.stop="actionSelectSku(sku, item)"
          >
            <text>{{ $t("alipay.sku") }}</text>
            <view v-if="goods_info.select_num > 0" class="attr-select-num">{{
              goods_info.select_num
            }}</view>
          </view>
        </view>
        <view class="sales"
          >{{ $t("goods.count") }} {{ goods_info.sales }}</view
        >
      </view>
      <view class="goods-detail">
        <view class="title">
          <image :src="asyncImgs.goods.line_left" alt="" mode="aspectFill" />
          <text>{{ $t("goods.detail") }}</text>
          <image :src="asyncImgs.goods.line_right" alt="" mode="aspectFill" />
        </view>
        <view class="detail-row">
          <view class="content" v-if="goodDetail" v-html="goodDetail"></view>
        </view>
      </view>
    </view>
    <!-- 底部按钮 -->
    <footBtn
      :cartSelectData="cartSelectData"
      :cartTotalPrice="cartTotalPrice"
      :cartChoosedNum="cartChoosedNum"
      @handleFoot="handleFoot"
      @handleFootBtn="handleFootBtn"
    ></footBtn>

    <!-- 已选商品弹窗 -->
    <choosedPopup
      :listData="cartSelectData"
      v-if="showChoosePopup"
      @closePopup="showChoosePopup = false"
      @clearChoosed="clearChoosed"
      @selectAddOne="selectAddOne"
      @selectReduceOne="selectReduceOne"
    ></choosedPopup>

    <!-- sku弹框 -->
    <newSkuPopup
      ref="sku-popup"
      :skuData="{}"
      :goodsInfo="goods_info"
      :foodExtGoods="goods_info.food_ext_goods"
      :foodExtGoodsName="goods_info.food_ext_goods_name"
      @confirm="(e) => setAddgoodsToCart(e.data)"
    ></newSkuPopup>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import footBtn from "../components/goods/footBtn.vue";
import newSkuPopup from "../components/orderMeal/newSkuPopup.vue";
import choosedPopup from "../components/orderMeal/choosedPopup.vue";

import { orderMealMixin } from "../mixins/index";

export default {
  components: {
    footBtn,
    newSkuPopup,
    choosedPopup,
    Shenhe,
  },
  data() {
    return {
      goodInfo: {},
      goods_info: {},
      chooseData: [], // 已选sku
      showChoosePopup: false,

      params: null,
    };
  },
  mixins: [orderMealMixin], //混入文件
  filters: {
    priceBeforeZero(val) {
      if (!val) val = "";
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (!val) val = "";
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
  computed: {
    goodDetail() {
      return this.goods_info.detail;
    },
  },
  onLoad(t) {
    if (t?.id) {
      this.getGoodDetail(t.id);
    }
  },
  onHide() {
    this.clearIntervalPoll = true;
  },
  onUnload() {
    clearInterval(this.intervalPoll);
  },
  onShow() {
    this.pollingCartData();
    this.clearIntervalPoll = false;
    this.startPolling();
  },
  methods: {
    // 开始轮询数据
    startPolling() {
      setTimeout(() => {
        this.intervalPollingCartData();
      }, 3000);
    },
    getGoodDetail(id) {
      this.$allrequest.alipay.getGoodsDetail({ id }).then((res) => {
        if (!res.code) {
          let data = Object.assign({}, res.data);
          data.select_num = 0;
          this.goods_info = data;
          this.pollingCartData(() => {
            this.updateDataToView();
          });
        }
      });
    },
    reduce() {
      if (this.goods_info.select_num <= 0) return;
      this.goods_info.select_num--;
      if (this.goods_info.select_num <= 0) {
        this.goods_info.select_num = 0;
      }
      let params = {
        cart_id: this.goods_info.cart_id,
        num: this.goods_info.select_num,
      };
      this.reduceOneCartNum(params, () => {
        this.pollingCartData(() => {
          this.updateDataToView();
        });
      });
    },
    add() {
      if (this.goods_info.num <= 0) {
        uni.showToast({
          title: this.$t("alipay.noCount"),
          icon: "none",
        });
        return;
      }

      let attr = this.goods_info.attr_group_list[0];
      attr = [
        {
          attr_group_id: attr.attr_group_id,
          attr_group_name: attr.attr_group_name,
          attr_id: attr.attr_list[0].attr_id,
          attr_name: attr.attr_list[0].attr_name,
        },
      ];
      let params = {
        attr: JSON.stringify(attr),
        num: 1,
        goods_id: this.goods_info.id,
      };
      let sku = this.goods_info;

      if (sku.food_ext_goods) {
        this.$refs["sku-popup"].showPopup(0, this.goods_info);
      } else {
        this.setAddgoodsToCart(params);
      }
    },

    // 加入购物车
    setAddgoodsToCart(params) {
      this.addGoodsToCart(params, () => {
        this.$refs["sku-popup"].closePopup();
        this.pollingCartData(() => {
          this.updateDataToView();
        });
      });
    },

    // 已选弹框添加一个回调
    selectAddOne(e) {
      if (this.goods_info.use_attr == 1) {
        let item = e.item;
        let attr = item.attr_list;
        attr.forEach((d) => {
          d["attr_id"] = d.id;
        });
        let params = {
          attr: JSON.stringify(attr),
          num: 1,
          goods_id: item.goods_id,
        };
        this.addGoodsToCart(params, () => {
          this.pollingCartData(() => {
            this.updateDataToView();
          });
        });
      } else {
        this.add();
      }
    },
    // 已选弹框删除一个回调
    selectReduceOne(e) {
      this.reduceOneCartNum(e, () => {
        this.pollingCartData(() => {
          this.updateDataToView();
        });
      });
    },
    chooseOk() {
      this.$utils.setStorage("addGoodInfoData", JSON.stringify(this.goodInfo));
      this.$utils.goBack();
    },
    actionSelectSku() {
      this.$refs["sku-popup"].showPopup();
    },

    // 点击页面底部，弹出已选sku弹框
    handleFoot() {
      this.showChoosePopup = !this.showChoosePopup;
    },
    // 同步点餐数据
    updateDataToView() {
      if (this.goods_info.use_attr == 1) {
        this.goods_info.select_num = 0;
      }
      for (let i = 0; i < this.cartSelectData.length; i++) {
        for (let n = 0; n < this.cartSelectData[i].goods_list.length; n++) {
          if (
            this.user_id == this.cartSelectData[i].user_id &&
            this.goods_info.id == this.cartSelectData[i].goods_list[n].goods_id
          ) {
            this.goods_info.cart_id =
              this.cartSelectData[i].goods_list[n].cart_id;
            if (this.goods_info.use_attr == 1) {
              this.goods_info.select_num =
                this.goods_info.select_num +
                this.cartSelectData[i].goods_list[n].num;
            } else {
              this.goods_info.select_num =
                this.cartSelectData[i].goods_list[n].num;
            }
          }
        }
      }
    },
    // 点击底部按钮组件回调。去结算
    handleFootBtn() {
      uni.showToast({
        title: this.$t("home.loading"),
        duration: 2000,
        icon: "none",
      });
      this.$utils.toUrl(
        `/alipay-order/spellOrder/index?flag_id=${this.storeFlagId}&shareId=${this.startManId}`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  font-family: PingFang SC;
  background-color: #f2f2f2;
  min-height: 100vh;
  padding-bottom: 15vw;

  .page-head {
    width: 100%;
    .swiper-section {
      width: 100%;
      height: 750rpx;
      background-color: #ffffff;
      background-size: 100% 100%;
    }
  }
  .page-body {
    width: 100%;
    .goods-info {
      width: 100%;
      background: #ffffff;
      padding: 24rpx 24rpx 26rpx 36rpx;
      .name {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #262626;
        word-break: break-all;
      }
      .sku {
        margin-top: 1.87vw;
      }
      .sales {
        font-size: 22rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8c8c8c;
      }
      .actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .price-box {
          display: flex;
          align-items: baseline;
          .price {
            display: flex;
            align-items: baseline;
            text:first-child {
              font-size: 34rpx;
              color: #f8260a;
            }
            text:nth-child(2) {
              font-size: 56rpx;
              color: #f8260a;
            }
            text:nth-child(3) {
              font-size: 34rpx;
              color: #f8260a;
            }
          }
          .origin-price {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #262626;
            margin-left: 12rpx;
          }
        }
        .action-box {
          display: flex;
          justify-content: center;
          align-items: center;
          .reduce {
            width: 44rpx;
            height: 44rpx;
            background: #ffffff;
            border-radius: 16rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #f60313;
            view {
              width: 24rpx;
              height: 4rpx;
              background: #f0250e;
            }
          }
          .disabled {
            background: #f1f1f1;
            border: 0 none;
            view {
              background: #ffffff;
            }
          }
          .num {
            font-size: 28rpx;
            font-weight: 400;
            line-height: 4.27vw;
            color: #262626;
            margin: 0 2.93vw;
          }
          .add {
            width: 44rpx;
            height: 44rpx;
            background: #f60313;
            border-radius: 16rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .iconfont {
              color: #ffffff;
              font-weight: bold;
              font-size: 36rpx;
            }
          }
        }
        .choose-sku {
          width: 100rpx;
          height: 44rpx;
          background: #f60313;
          border-radius: 16rpx;
          text-align: center;
          line-height: 44rpx;
          font-size: 24rpx;
          font-weight: 600;
          color: #ffffff;
          position: relative;
          .attr-select-num {
            width: 32rpx;
            height: 32rpx;
            background: #f84a33;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #ffffff;
            position: absolute;
            right: -16rpx;
            top: -16rpx;
          }
        }
      }
    }
    .goods-detail {
      width: 100%;
      margin: 24rpx auto;
      .title {
        height: 12vw;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f6f6f6;
        text {
          margin: 0 20rpx;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
        }
        image {
          width: 60rpx;
          height: 12rpx;
        }
      }
      .detail-row {
        width: 100%;
        background-color: #ffffff;
        padding: 0 10rpx 10rpx 10rpx;
      }
    }
  }
}
</style>
